<template>

   
    <lay-body>
      <lay-layout>
        <lay-body> <div ref="video" style=" height: 80%; width: 99%; "></div></lay-body>
        <lay-side>
            <!-- <lay-space direction="vertical" size="md">-->
  <!-- <lay-space size="md">  -->
           <p>正在播放:{{ data.name }}</p>
        <lay-tag v-for="(item,index) in videolist" :key="index" color="#F5319D" variant="light" @click="play(item)">{{ item.name.split(".")[0].replace(/[^\d]/g, " ")  }}</lay-tag>
 
  <!-- </lay-space> -->
<!--</lay-space> -->
        </lay-side>
      </lay-layout>
    </lay-body>
</template>
<script lang="ts">
export default {
    name: "video"
}
</script>
<script lang="ts" setup>
import { ref,shallowRef } from 'vue';
import { defineProps, withDefaults, defineEmits } from 'vue';
import { layer } from "@layui/layui-vue";
import DPlayer from 'dplayer';
import webosutils from "webosutils";
const video = shallowRef();
const dp =ref(null);
interface IvideoProps {
config:any
}
const props = withDefaults(defineProps<IvideoProps>(), {
    config:Object,
});
const data=ref({name:"",tv:""});
const videolist=ref([]);
const options = {
    container:video,
    video: {
        url: '',
        pic: '',
    }

};
data.value.name=props.config.title;
const play=(item:any)=>{
    console.log(item);
    data.value.name=item.name;
    getUrl(item.key);
}
const getUrl = (id:string) => {
    webosutils.http.post("/v1/api/ctdisk/fetch_url", { id:  id}, "请稍等").then((res:any) => {
        if (res.success) {
            options.video.url = res.data.download_url;
            options.video.pic =props. config.imgsrc;
            options.container=video.value;
            dp.value= new DPlayer(options);
         
           // dp!.value.play();
            // layer.open({
            //     type: 1,
            //     title: "正在播放"+ props.name,
            //     isHtmlFragment: true,
            //     content: '<video width="320" height="240" controls>'
            //         + '<source src="' + res.data.download_url + '" type="video/mp4">'

            //         + '您的浏览器不支持Video标签。'
            //         + '</video>'
            // });
        }
    }).catch((res:any) => {
            layer.msg("请求错误！", { icon: 3, time: 1000 })
        });
}
const ajax = () => {
    //记录上级目录
  
    webosutils.http.post("/v1/api/ctdisk/cffile", { key:  props.config.folder_id,  page: 1, limit: 9000 }, "请稍等").then((res:any) => {
        videolist.value = Object.freeze(res.data);
    
    }).catch((res:any) => {

    })



}
getUrl(props.config.id);
ajax();
</script>